import React from 'react';
import { connect } from 'dva'
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import styles from './index.less'

const creator = (type, payload) => ({ type, payload })
class NormalLoginForm extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.dispatch(creator('users/login',values)).then(res=>{
          if(res.status===200){
            // console.log(res,888)
          }
        })
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (

      <div className={styles.layout}>
        
        <Form onSubmit={this.handleSubmit} className={styles.login_form}>
          <div className={styles.logo}></div>
          <Form.Item>
            {getFieldDecorator('username', {
              rules: [{ required: true, message: '请输入用户名!' }],
            })(
              <Input
                prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                placeholder="用户名"
              />,
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('password', {
              rules: [{ required: true, message: '请输入密码!' }],
            })(
              <Input
                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                type="password"
                placeholder="密码"
              />,
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('remember', {
              valuePropName: 'checked',
              initialValue: true,
            })(<Checkbox>记住我</Checkbox>)}
            <a className="login-form-forgot" href="" className={styles.fr}>
              忘记密码
          </a>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className={styles.login_form_button}>
              登入
          </Button>
          </Form.Item>
          <Form.Item> <a href="">现在注册</a>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);

export default connect()(WrappedNormalLoginForm);
